<template>
	<view class="body" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
		<!-- 头部区域 -->
		<view class="header">
			<!-- 用户头像信息ID区域 -->
			<view class="userInfo">
				<view class="userInfoLeftBox">
					<van-image width="122rpx" height="122rpx" fit="cover" @click="login" round
						:src="userObj.avatar ? userObj.avatar : '/static/images/userHeaderDefault.jpg'" use-loading-slot
						lazy-load class="userInfoAvatar">
					</van-image>
					<text @click="login" v-if="!userObj.id" class="login">登录</text>
					<view class="IdNameBox" v-else>
						<text class="userName">{{userObj.userName}}</text>
						<text class="userInfoId" v-show="userObj.id">id：{{userObj.id}}</text>
					</view>
				</view>
				<view class="userInfoRightBox" v-if="userObj.id" @click="skip('material')">
					<text>个人资料</text>
					<i class="iconfont icon-youjiantou"></i>
				</view>
			</view>
			<!-- 我的关注，粉丝，资料区域 -->
			<view class="classify">
				<view @click="skip('issue')">
					<text>{{userNum.articleNum | NumMet}}</text>
					<text>我的文章</text>
				</view>
				<view @click="skip('attention')">
					<text>{{userNum.answerUserNum | NumMet}}</text>
					<text>我的关注</text>
				</view>
				<view @click="skip('fensi')">
					<text>{{userNum.fansNum | NumMet}}</text>
					<text>我的粉丝</text>
				</view>
			</view>
		</view>
		<!-- 弧状区域 -->
		<view class="dragContent" :style="{transform: 'translateY('+translateY+'rpx)',
		transition:transition}">
			<!-- 弧状区域占位 -->
			<view class="headerFooter"></view>
			<!-- 个人中心功能区域 -->
			<view class="myServe">
				<view @click="skip('goods')">
					<van-image width="48rpx" fit="widthFix" src="/static/images/my_goumai.png" use-loading-slot
						lazy-load>
					</van-image>
					<text>商品管理</text>
				</view>
				<view @click="skip('approve')">
					<van-image width="48rpx" fit="widthFix" src="/static/images/my_renzheng.png" use-loading-slot
						lazy-load>
					</van-image>
					<text>账号认证</text>
				</view>
				<view @click="skip('promotion')">
					<van-image width="48rpx" fit="widthFix" src="/static/images/my_tuiguang.png" use-loading-slot
						lazy-load>
					</van-image>
					<text>推广有礼</text>
				</view>
				<view @click="skip('feedback')">
					<van-image width="48rpx" fit="widthFix" src="/static/images/my_fabu.png" use-loading-slot lazy-load>
					</van-image>
					<text>意见反馈</text>
				</view>
				<view @click="showRelationMy">
					<van-image width="48rpx" fit="widthFix" src="/static/images/my_lianxi.png" use-loading-slot
						lazy-load>
					</van-image>
					<text>联系我们</text>
				</view>
			</view>
			<!-- 退出登录 -->
			<view class="exitLogin" v-if="userObj.id" @click="exitLogin">
				退出登录
			</view>
		</view>
		<!-- 联系我们 -->
		<van-overlay :show="relationMy" @click="hideRelationMy">
			<view class="relationMy">
				<image class="relationMyImg" src="https://static01.imgkr.com/temp/87ff00ec85b14db3a07cbeb2bf9344d0.png"
					mode="widthFix"></image>
				<view class="relationMyContent">
					<text class="relationMyContentTitle">联系我们</text>
					<text>微信：{{relationMyObj.wx ? relationMyObj.wx : 'SQ200223'}}</text>
					<text>QQ：{{relationMyObj.qq ? relationMyObj.qq : '1776017814'}}</text>
				</view>
			</view>
		</van-overlay>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 请求登录所需参数
				loginObj: {
					avatar: "",
					code: "",
					userName: "",
					login: true
				},
				// 关注,文章,粉丝数
				userNum: {
					fansNum:0,
					articleNum:0,
					answerUserNum:0
				},
				// 用户对象
				userObj: {},
				// 联系我们
				relationMy: false,
				// 联系我们对象
				relationMyObj: {},
				// 当前产生的距离
				moveDistance: 0,
				// 拖拽时候的Y点
				moveY: 0,
				// 初始位置的Y点
				startY: 0,
				// 自身Y点
				translateY: -100,
				// 动画时长
				transition: "0s"
			};
		},
		onShow() {
			// 从本地缓存中获取一下最新用户对象
			this.userObj = uni.getStorageSync("userObj") || {}
			if (this.userObj.id) {
				this.getNum()
			}
		},
		onLoad() {
			this.getRelationMy()
			// this.initWebsocket()
		},
		methods: {
			// 初始化websocket
			initWebsocket() {
				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
				this.socketTask = uni.connectSocket({
					// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
					url: "ws://10.205.5.161:8001/websocket/" + this.userObj.token,
					success(data) {
						console.log("websocket连接成功");
						console.log(data)
					},
				});

				// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
				this.socketTask.onOpen((res) => {
					console.log("WebSocket连接正常打开中...！");
					// this.is_open_socket = true;
					// // 注：只有连接正常打开中 ，才能正常成功发送消息
					// this.socketTask.send({
					// 	data: "uni-app发送一条消息",
					// 	async success() {
					// 		console.log("消息发送成功");
					// 	},
					// });
					// // 注：只有连接正常打开中 ，才能正常收到消息
					this.socketTask.onMessage((res) => {
						console.log("收到服务器内容：" + res.data);
					});
				})
				// 这里仅是事件监听【如果socket关闭了会执行】
				this.socketTask.onClose(() => {
					console.log("已经被关闭了")
				})
			},
			// 登录
			login() {
				// 处于未登录的时候进行登录
				if (!this.userObj.userId) {
					// 获取唯一凭证
					uni.login({
						success: (res) => {
							this.loginObj.code = res.code
						},
					})
					// 获取用户信息
					uni.getUserProfile({
						desc: '此操作将获取用户信息',
						success: async (res) => {
							this.loginObj.avatar = res.userInfo.avatarUrl
							this.loginObj.userName = res.userInfo.nickName
							// 发送请求获取用户数据
							const {
								data: result
							} = await uni.$http.post("/ym_server/account/login", this.loginObj)
							if (result.code === 200) {
								this.userObj = result.data.user
								uni.setStorageSync("userObj", result.data.user)
								this.getRelationMy()
								this.getNum()
							} else {
								uni.showToast({
									title: "登录失败",
									icon: "none"
								})
							}
						}
					})
				}
			},
			// 跳转不同界面
			skip(type) {
				// 查看是否登录再进行跳转
				if (!this.userObj.id) {
					uni.showToast({
						title: '请先进行登录',
						icon: 'none',
						duration: 1000
					})
				} else {
					if (type === "attention") {
						uni.navigateTo({
							url: "/subpkg/my_attention/my_attention"
						})
					} else if (type === "fensi") {
						uni.navigateTo({
							url: "/subpkg/my_fans/my_fans"
						})
					} else if (type === "material") {
						uni.navigateTo({
							url: "/subpkg/my_material/my_material"
						})
					} else if (type === "issue") {
						uni.navigateTo({
							url: "/subpkg/my_issue/my_issue"
						})
					} else if (type === "goods") {
						uni.navigateTo({
							url: "/subpkg/my_goods/my_goods"
						})
					} else if (type === "approve") {
						uni.navigateTo({
							url: "/subpkg/my_approve/my_approve"
						})
					} else if (type === "promotion") {
						uni.showToast({
							title: "功能暂时未开放",
							icon: "none"
						})
					} else if (type === "feedback") {
						uni.navigateTo({
							url: "/subpkg/my_feedback/my_feedback"
						})
					}
				}
			},
			// 显示联系我们
			showRelationMy() {
				if (this.userObj.id) {
					this.relationMy = true
				} else {
					uni.showToast({
						title: "请先进行登录",
						icon: "none"
					})
				}
			},
			// 隐藏联系我们
			hideRelationMy() {
				this.relationMy = false
			},
			// 获取联系我们
			async getRelationMy() {
				const {
					data: result
				} = await uni.$http.get("/ym_server/IntactGoods/contactWe")
				if (result.code === 200) {
					this.relationMyObj = result.data.list
				}
			},
			// 获取文章，粉丝，关注数量
			async getNum() {
				const {
					data: result
				} = await uni.$http.get("/ym_server/user/num")
				if (result.code === 200) {
					this.userNum = {
						answerUserNum: result.data.data.answerUserNum,
						articleNum: result.data.data.articleNum,
						fansNum: result.data.data.fansNum
					}
				}
			},
			// 开始拖拽
			handleTouchStart(event) {
				this.transition = '0s'
				this.startY = event.touches[0].clientY
			},
			// 拖拽中
			handleTouchMove(event) {
				this.moveY = event.touches[0].clientY
				this.moveDistance = this.moveY - this.startY
				if (this.moveDistance >= 0 && this.moveDistance < 70) {
					this.translateY = this.moveDistance - 100
				}
			},
			// 结束拖拽
			handleTouchEnd() {
				this.transition = '0.5s linear'
				this.translateY = -100
			},
			// 退出登录
			exitLogin() {
				uni.showModal({
					title: '是否退出登录？',
					success: (res) => {
						if (res.confirm) {
							uni.removeStorageSync("userObj")
							this.userObj = {}
							this.loginObj = {
								avatar: "",
								code: "",
								userName: "",
								login: true
							} 
							this.userNum = {
								answerUserNum: 0,
								articleNum: 0,
								fansNum: 0
							}
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.classifyImage:hover {
		transform: translateY(-30upx);
		transition: 0.5s;
	}

	// 整个大背景，最小高度为整个屏幕
	.body {
		background: #ffffff;
		width: 100%;
		height: 100%;
		min-height: 100vh;
		overflow-x: hidden;

		// 整个头部区域
		.header {
			width: 100%;
			height: 600upx;
			background: #3FD3D1;
			overflow: hidden;

			// 用户头像信息ID区域
			.userInfo {
				height: 122upx;
				margin: 200upx 32upx 0upx 32upx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.userInfoLeftBox {
					height: 130upx;
					display: flex;
					max-width: 70%;
					align-items: center;

					.userInfoAvatar {
						margin-right: 30upx;
					}

					.login {
						color: white;
					}

					.IdNameBox {
						width: 70%;
						display: flex;
						height: 100%;
						flex-direction: column;
						justify-content: center;

						.userName {
							color: white;
							max-width: 100%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							font-size: 36upx;
							line-height: 40upx;
						}

						.userInfoId {
							color: white;
							line-height: 40upx;
							font-size: 28upx;
						}
					}

				}

				.userInfoRightBox {
					display: flex;
					align-items: center;
					padding: 20upx 0upx;

					text {
						color: white;
						font-size: 28upx;
					}

					i {
						color: white;
						font-size: 28upx;
					}
				}
			}

			// 我的关注，粉丝，资料区域
			.classify {
				margin: 80upx 98upx 0upx 98upx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				view {
					display: flex;
					flex-direction: column;
					align-items: center;

					text {
						font-size: 28upx;
						color: white;

						&:first-child {
							font-size: 36upx;
							margin-bottom: 16upx;
						}
					}
				}
			}
		}

		.dragContent {
			background: #ffffff;
		}

		// 弧状区域占位
		.headerFooter {
			width: 110%;
			margin-left: -5%;
			height: 80upx;
			transform: translateY(-1px);
			background: #3FD3D1;
			border-radius: 0upx 0upx 50% 50%;
		}

		// 个人中心功能区域
		.myServe {
			width: 600upx;
			background: #ffffff;
			margin: 70upx auto 0upx;

			view {
				display: flex;
				align-items: center;
				border-bottom: 1px solid #EEF2F4;
				padding: 32upx 0upx 32upx 0upx;

				image {
					width: 48upx;
				}

				text {
					color: #333333;
					margin-left: 36upx;
					font-size: 28upx;
				}

				&:last-child {
					border-bottom: 0px solid #EEF2F4;
				}
			}
		}

		// 联系我们
		.relationMy {
			position: fixed;
			top: 50%;
			left: 50%;
			width: 70%;
			display: flex;
			flex-direction: column;
			align-items: center;
			transform: translate(-50%, -50%);

			.relationMyImg {
				width: 70%;
				z-index: 1;
				transform: translate(-10upx, 13px);
			}

			.relationMyContent {
				width: 100%;
				background: #ffffff;
				border-radius: 15upx;
				padding: 80upx 0upx;
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;

				.relationMyContentTitle {
					position: absolute;
					top: 5upx;
					left: 50%;
					font-size: 20upx;
					color: #7A7A7A;
					transform: translateX(-40%);
				}

				text {
					line-height: 48upx;
					font-size: 32upx;
					color: #3FD3D1;

					&:last-child {
						margin-top: 30upx;
					}
				}
			}
		}

		//退出登录
		.exitLogin {
			margin: 120upx auto 0upx;
			width: 84%;
			height: 96upx;
			border-radius: 4px;
			background: #F75454;
			color: #FFFFFF;
			font-size: 32upx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
